<template>
  <div class="item">
    <div class="item_label">商机编号：{{ state.business_code }}</div>
  </div>
  <div class="item">
    <div class="item_label">商机流程：{{ state.workflow_name }}</div>
  </div>
  <div class="item">
    <div class="item_label">商机金额：￥{{ state.amount }}</div>
  </div>
  <div class="item">
    <div class="item_label">预计赢单时间：￥{{ state.predict_time }}</div>
  </div>
  <div class="item">
    <div class="item_label">归属员工：</div>
    <div class="card">
      <img class="avatar" :src="state.belong_info?.avatar" alt="" />
      <div>{{ state.belong_info?.name }}</div>
    </div>
  </div>
  <div class="item">
    <div class="item_label">购买客户：</div>
    <div class="card">
      <img class="avatar" :src="state.cust_info?.avatar" alt="" />
      <div>{{ state.cust_info?.name }}</div>
    </div>
  </div>
  <div v-if="state.cust_info.type == 2" class="item">
    <div class="item_label">联系人：</div>
    <div class="card">
      <img class="avatar" :src="state.corp_contact_info?.avatar" alt="" />
      <div>{{ state.corp_contact_info?.name }}</div>
    </div>
  </div>
  <div class="item">
    <div class="item_label">协作员工：</div>
    <div class="item_for" :style="{ gridTemplateColumns: `repeat(auto-fit, minmax(170px, ${state.assist_info.length < 4 ? '250px' : '1fr'}))` }">
      <div class="card" v-for="item in state.assist_info" :key="item.id">
        <img class="avatar" :src="item.avatar" alt="" />
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
  <div class="item item_mg">
    <div class="item_label">关联群聊：</div>
    <div class="item_for" :style="{ gridTemplateColumns: `repeat(auto-fit, minmax(170px, ${state.groupchat.length < 4 ? '250px' : '1fr'}))` }">
      <div class="card" v-for="item in state.groupchat" :key="item.id">
        <img class="avatar" :src="item.avatar" alt="" />
        <div class="groupchat">
          <el-tooltip v-if="item.name?.length > 7" effect="dark" :content="item.name" placement="top-start">
            <div class="name">{{ item.name || '--' }}</div>
          </el-tooltip>
          <div v-else class="name">{{ item.name || '--' }}</div>
          <div class="owner_username">群主：{{ item.owner_username || '--' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const state = ref<any>({
    business_code: '',
    workflow_name: '',
    amount: '',
    predict_time: '',
    belong_info: {
      id: '',
      name: '',
      avatar: ''
    },
    assist_info: [],
    cust_info: {
      name: '',
      avatar: ''
    },
    corp_contact_info: {
      id: '',
      name: '',
      avatar: ''
    },
    groupchat: []
  })
  const onState = (v: any) => {
    state.value = v
    state.value.amount = v.amount || '--'
    state.value.predict_time = v.predict_time || '--'
    if (v.cust_info.type == 2) {
      state.value.corp_contact_info = {
        name: v.cust_info.corp_contact_info.name,
        avatar: v.cust_info.corp_contact_info.avatar
      }
      state.value.cust_info = {
        type: v.cust_info.type,
        name: v.cust_info?.crop_info.short_name || v.cust_info?.crop_info.corp_name || v.cust_info?.crop_info.name || v.cust_info?.crop_info.nickname || '--',
        avatar: v.cust_info.avatar
      }
    }
  }
  defineExpose({
    onState
  })
</script>

<style lang="scss" scoped>
  .item {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    color: #33302d;
    font-family: STHeitiSC-Light, STHeitiSC;
    .item_label {
      min-width: fit-content;
    }
    .card {
      padding: 6px;
      padding-right: 16px;
      background: #f9f9f9;
      border-radius: 4px;
      border: 1px solid #eaeaea;
      display: flex;
      align-items: center;
      .avatar {
        width: 36px;
        height: 36px;
        object-fit: cover;
        margin-right: 10px;
        border-radius: 4px;
      }
      .groupchat {
        .name {
          height: 20px;
          max-width: 100px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          font-size: 14px;
          color: #33302d;
        }
        .owner_username {
          font-size: 12px;
          color: #969696;
        }
      }
    }
    .item_for {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      grid-gap: 10px;
    }
  }
  .item_mg {
    margin-bottom: 0;
  }
</style>
